<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Previewer 图片预览"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-row>
        <hips-col
          v-for="(img, index) in imageSet"
          :key="index"
          span="6"
        >
          <img
            :src="img.msrc"
            class="image"
            @click="showPreviewer(index)"
          >
        </hips-col>
      </hips-row>

      <hips-button @click="addImage">
        addImage
      </hips-button>
      <hips-button @click="removeImage">
        removeImage
      </hips-button>
      <hips-button @click="destroyIt">
        destroy
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button, Row, Col } from '@hips/vue-ui';

export default {
  components: {
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  mixins: [ BasicView ],
  data() {
    return {
      showAction: false,
      imageSet: [],
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.imageSet = [
        {
          msrc:
            'https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg',
          src:
            'https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg',
          desc: 'image 1',
        },
        {
          msrc:
            'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          src:
            'https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg',
          desc: 'image 2',
        },
        {
          msrc:
            'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
          src:
            'https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg',
          desc: 'image 3',
        },
        {
          msrc:
            'https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg',
          src:
            'https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg',
          desc: 'image 4',
        },
      ];
    });
  },
  methods: {
    showPreviewer(index) {
      this.$hips.previewer.show({
        imageSet: this.imageSet,
        options: {
          index: index,
        },
        onClose: () => {
          console.log(`onClose`);
        },
        onIndexChange: (index) => {
          console.log(`onIndexChange index = ${index}`);
        },
      });

      this.$nextTick(() => {
        let currentIndex = this.$hips.previewer.getCurrentIndex();
        console.log(`currentIndex = ${currentIndex}`);
      });
    },

    addImage() {
      this.imageSet.push({
        msrc:
          'https://farm4.staticflickr.com/3920/15008465772_383e697089_m.jpg',
        src: 'https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg',
        desc: 'image 5',
      });
    },
    removeImage() {
      this.imageSet.splice(this.imageSet.length - 1, 1);
    },
    destroyIt() {
      this.$hips.previewer.destroy();
    },
  },
};
</script>

<style lang="stylus">
.image{
  width 100%
}
</style>
